<div class="container-fluid">
  <div id="connection-header" class="row">
    <div id="connection-logo" class="offset-3 col-6">
      <img src="assets/img/datagerry_logo.svg" alt="DATAGERRY - Logo"/>
    </div>
    <div class="col-12">
      <div class="alert alert-warning alert-dismissible fade show" role="alert">
        If you see this message, the frontend cannot find a connection to DATAGERRY.
        Probably there is a problem with your backend instance. You can try to connect manually.
        Otherwise notify your administrator.
        <button type="button" class="close" data-dismiss="alert">
          <span>&times;</span>
        </button>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-6">
      <div class="card">
        <div class="card-header">
          Connection details
        </div>
        <div class="card-body">
          <form [formGroup]="connectionForm" (ngSubmit)="checkConnection()" class="needs-validation" novalidate>
            <div class="form-group">
              <label></label>
              <div class="input-group">
                <div class="input-group-prepend">
                  <div class="input-group-text">Host
                  </div>
                </div>
                <input formControlName="host" id="host" name="host" placeholder="127.0.0.1" type="text"
                       required="required" class="form-control">
              </div>
              <span id="hostHelpBlock" class="form-text text-muted">Backend server address</span>
            </div>
            <div class="form-group">
              <label></label>
              <div class="input-group">
                <div class="input-group-prepend">
                  <div class="input-group-text">Port</div>
                </div>
                <input formControlName="port" id="port" name="port" type="text" required="required"
                       class="form-control">
              </div>
              <span id="portHelpBlock" class="form-text text-muted">Port of the backend server</span>
            </div>
            <div class="form-group">
              <label></label>
              <div class="input-group">
                <div class="input-group-prepend">
                  <div class="input-group-text">Protocol</div>
                </div>
                <select formControlName="protocol" id="protocol" name="protocol" required="required"
                        class="form-control">
                  <option value="http" selected>HTTP</option>
                  <option value="https" selected>HTTPS</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <button name="connect" type="submit" class="btn btn-primary btn-block">try to connect</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="col-6">
      <div class="card">
        <div class="card-header">
          Connection status
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-4">
              DATAGERRY connection status:
            </div>
            <div class="col-8">
              <div *ngIf="connectionTest; else disconnected">
                <span class="badge badge-success">CONNECTED</span>
                <dl class="row mt-2">
                  <dt class="col-sm-3">Title</dt>
                  <dd class="col-sm-9">{{connectionResponse.title}}</dd>
                  <dt class="col-sm-3">Version</dt>
                  <dd class="col-sm-9">{{connectionResponse.version}}</dd>
                  <dt class="col-sm-3">Database connection</dt>
                  <dd class="col-sm-9">{{connectionResponse.connected}}</dd>
                </dl>
              </div>
              <ng-template #disconnected>
                <span class="badge badge-danger">DISCONNECTED</span>
              </ng-template>
            </div>
          </div>
        </div>
        <div class="card-footer">
          <button type="button" class="btn btn-sm btn-block btn-success" (click)="useConnection()"
                  [disabled]="!connectionTest">
            Use connection
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
